<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  <template>
  <div>
    <div class="Home_taskItem_box">
      <div class="taskItem_title">
        <div class="taskItem_title_return" @click="ReturnsHistory">
          <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
          <span>任务中心</span>
        </div>
        <p>{{ taskLinst.busiTypeName }}</p>
      </div>
      <scroll class="taskItem_item_box">
        <!-- 项目立项 -->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目立项'">
          <div class="taskItem_item_title" @click="taskItemListCut(1)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目立项</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 1 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{ taskItem_item_content_animation: taskItemListState == 1 }"
            v-if="taskItemListState == 1"
          >
            <div class="taskItem_item_content_base_item">
              <p>立项编号</p>
              <span>{{ taskItemBaseXMLX.approvalCode }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>立项名称</p>
              <span>{{ taskItemBaseXMLX.approvalName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>承租人</p>
              <span>{{ taskItemBaseXMLX.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目金额</p>
              <span>{{ taskItemBaseXMLX.approvalAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>风险金</p>
              <span>{{ taskItemBaseXMLX.depositAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>手续费</p>
              <span>{{ taskItemBaseXMLX.poundageAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁期限</p>
              <span>{{ taskItemBaseXMLX.leaseTerm }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁利率</p>
              <span>{{ taskItemBaseXMLX.leaseInterest }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>收益率</p>
              <span>{{ taskItemBaseXMLX.leaseIrr }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>主办</p>
              <span>{{ taskItemBaseXMLX.mainManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>协办</p>
              <span>{{ taskItemBaseXMLX.viceManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>所属部门</p>
              <span>{{ taskItemBaseXMLX.deptName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目背景及营销情况</p>
              <span>{{ taskItemBaseXMLX.backgroundMarketingSituation }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>承租人基本情况</p>
              <span>{{ taskItemBaseXMLX.lesseeBasicSituation }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁物情况</p>
              <span>{{ taskItemBaseXMLX.leaseholdStatisticSituation }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>担保情况</p>
              <span>{{ taskItemBaseXMLX.guaranteeSituation }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>资金用途</p>
              <span>{{ taskItemBaseXMLX.fundsUseSituation }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>还款来源</p>
              <span>{{ taskItemBaseXMLX.fundsRepaymentSituation }}</span>
            </div>
          </div>
        </div>
        <!-- 项目评审-基本信息 -->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目评审'">
          <div class="taskItem_item_title" @click="taskItemListCut(10)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目评审-基本信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 10 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 10
            }"
            v-if="taskItemListState == 10"
          >
            <div class="taskItem_item_content_base_item">
              <p>立项编号</p>
              <span>{{ taskItemBaseXMPSjbxx.projectCode }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>立项名称</p>
              <span>{{ taskItemBaseXMPSjbxx.projectName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>承租人</p>
              <span>{{ taskItemBaseXMPSjbxx.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>法定代表人</p>
              <span>{{ taskItemBaseXMPSjbxx.legalRepresentativeName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>注册资本</p>
              <span>{{ taskItemBaseXMPSjbxx.registeredCaptital }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>注册地址</p>
              <span>{{ taskItemBaseXMPSjbxx.registeredAddress }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目金额</p>
              <span>{{ taskItemBaseXMPSjbxx.projectAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁方式</p>
              <span>{{ taskItemBaseXMPSjbxx.leaseMode }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目简介</p>
              <span>{{ taskItemBaseXMPSjbxx.projectBrief }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目来源</p>
              <span>{{ taskItemBaseXMPSjbxx.projectSource }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>资金用途</p>
              <span>{{ taskItemBaseXMPSjbxx.leaseholdCategy }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>还款来源</p>
              <span>{{ taskItemBaseXMPSjbxx.repaySource }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁物用途</p>
              <span>{{ taskItemBaseXMPSjbxx.rentUses }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>是否投保</p>
              <span>{{ taskItemBaseXMPSjbxx.whetherInsured }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>主办</p>
              <span>{{ taskItemBaseXMPSjbxx.mainManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>协办</p>
              <span>{{ taskItemBaseXMPSjbxx.viceManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>所属部门</p>
              <span>{{ taskItemBaseXMPSjbxx.deptName }}</span>
            </div>
          </div>
        </div>
        <!-- 项目评审-报价方案 -->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目评审'">
          <div class="taskItem_item_title" @click="taskItemListCut(11)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目评审-报价方案</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 11 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 11
            }"
            v-if="taskItemListState == 11"
          >
            <div class="taskItem_item_content_base_item">
              <p>方案名称</p>
              <span>{{ taskItemBaseXMPSbjcs.quoteName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>报价算法</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseAlgorithm.label }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>收租周期</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseCycle.label }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>期限（月）</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseTerm }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>报价利率</p>
              <span>{{ taskItemBaseXMPSbjcs.taxRate }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>手续费金额</p>
              <span>{{ taskItemBaseXMPSbjcs.poundageAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>风险金金额</p>
              <span>{{ taskItemBaseXMPSbjcs.depositAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>留购价</p>
              <span>{{ taskItemBaseXMPSbjcs.purchasePrice }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总租金</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseRentSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总利息</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseInterestSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总本金</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseCorpusTaxSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>XIRR</p>
              <span>{{ taskItemBaseXMPSbjcs.leaseXirr }}</span>
            </div>
          </div>
        </div>
        <!-- 项目评审-租赁物信息 (供应商分组)-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目评审'">
          <div class="taskItem_item_title" @click="taskItemListCut(12)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目评审-租赁物信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 12 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 12
            }"
            v-if="taskItemListState == 12"
          >
            <div class="taskItem_item_content_base_item">
              <p>供应商</p>
              <span>{{ taskItemBaseXMPSzlwxx.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>原值</p>
              <span>{{ taskItemBaseXMPSzlwxx.originalValue }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>评估价值</p>
              <span>{{ taskItemBaseXMPSzlwxx.netAssessment }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>账面净值</p>
              <span>{{ taskItemBaseXMPSzlwxx.netBookValue }}</span>
            </div>
          </div>
        </div>
        <!-- 项目评审-租赁物信息 (其他)-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目评审'">
          <div class="taskItem_item_title" @click="taskItemListCut(13)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目评审-租赁物信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 13 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 13
            }"
            v-if="taskItemListState == 13"
          >
            <div class="taskItem_item_content_base_item">
              <p>供应商</p>
              <span>{{ taskItemBaseXMPSzlwxxQT.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>原值</p>
              <span>{{ taskItemBaseXMPSzlwxxQT.originalValue }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>评估价值</p>
              <span>{{ taskItemBaseXMPSzlwxxQT.netAssessment }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>账面净值</p>
              <span>{{ taskItemBaseXMPSzlwxxQT.netBookValue }}</span>
            </div>
          </div>
        </div>
        <!-- 项目评审-担保信息-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '项目评审'">
          <div class="taskItem_item_title" @click="taskItemListCut(14)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>项目评审-担保信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 14 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 14
            }"
            v-if="taskItemListState == 14"
          >
            <div class="taskItem_item_content_base_item">
              <p>担保人</p>
              <span>{{ taskItemBaseXMPSdbxx.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>担保方式</p>
              <span>{{ taskItemBaseXMPSdbxx.guaranteeType.label }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>担保金额</p>
              <span>{{ taskItemBaseXMPSdbxx.guaranteeAmount }}</span>
            </div>
          </div>
        </div>
        <!-- 合同签约 - 基本信息-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '合同签约'">
          <div class="taskItem_item_title" @click="taskItemListCut(10)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>合同签约-基本信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 10 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 10
            }"
            v-if="taskItemListState == 10"
          >
            <div class="taskItem_item_content_base_item">
              <p>合同编号</p>
              <span>{{ taskItemBaseHTQYjbxx.contCode }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>项目名称</p>
              <span>{{ taskItemBaseHTQYjbxx.projectName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>承租人</p>
              <span>{{ taskItemBaseHTQYjbxx.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同金额</p>
              <span>{{ taskItemBaseHTQYjbxx.contAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>起租流程</p>
              <span>{{ taskItemBaseHTQYjbxx.rentFlow }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>调息方式</p>
              <span>{{ taskItemBaseHTQYjbxx.pranayamaWay }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>租赁方式</p>
              <span>{{ taskItemBaseHTQYjbxx.leaseMode }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>调息方案</p>
              <span>{{ taskItemBaseHTQYjbxx.pranayamaMethod }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>是否投保</p>
              <span>{{ taskItemBaseHTQYjbxx.whetherInsured }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同起始日</p>
              <span>{{ taskItemBaseHTQYjbxx.contStartDate }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同截止日期</p>
              <span>{{ taskItemBaseHTQYjbxx.contEndDate }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>主办</p>
              <span>{{ taskItemBaseHTQYjbxx.mainManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>协办</p>
              <span>{{ taskItemBaseHTQYjbxx.viceManagerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>所属部门</p>
              <span>{{ taskItemBaseHTQYjbxx.deptName }}</span>
            </div>
          </div>
        </div>
        <!-- 合同签约 - 报价测算-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '合同签约'">
          <div class="taskItem_item_title" @click="taskItemListCut(11)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>合同签约-报价测算</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 11 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 11
            }"
            v-if="taskItemListState == 11"
          >
            <div class="taskItem_item_content_base_item">
              <p>方案名称</p>
              <span>{{ taskItemBaseHTQYbjcs.quoteName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>报价算法</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseAlgorithm.label }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>收租周期</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseCycle.label }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>期限（月）</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseTerm }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>报价利率</p>
              <span>{{ taskItemBaseHTQYbjcs.taxRate }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>手续费金额</p>
              <span>{{ taskItemBaseHTQYbjcs.poundageAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>风险金金额</p>
              <span>{{ taskItemBaseHTQYbjcs.depositAmount }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>留购价</p>
              <span>{{ taskItemBaseHTQYbjcs.purchasePrice }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总租金</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseRentSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总利息</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseInterestSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>总本金</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseCorpusTaxSum }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>XIRR</p>
              <span>{{ taskItemBaseHTQYbjcs.leaseXirr }}</span>
            </div>
          </div>
        </div>
        <!-- 合同签约 - 买卖合同/转让协议-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '合同签约'">
          <div class="taskItem_item_title" @click="taskItemListCut(12)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span> 合同签约-买卖合同/转让协议</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 12 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 12
            }"
            v-if="taskItemListState == 12"
          >
            <div class="taskItem_item_content_base_item">
              <p>供应商</p>
              <span>{{ taskItemBaseHTQYmmht.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同金额</p>
              <span>{{ taskItemBaseHTQYmmht.contAmount }}</span>
            </div>
          </div>
        </div>        
        <!-- 合同签约 - 担保合同-->
        <div class="taskItem_item" v-if="taskLinst.busiTypeName == '合同签约'">
          <div class="taskItem_item_title" @click="taskItemListCut(12)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span> 合同签约-担保合同</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 12 }"></i>
          </div>
          <div
            class="taskItem_item_content_base"
            :class="{
              taskItem_item_content_animation: taskItemListState == 12
            }"
            v-if="taskItemListState == 12"
          >
            <div class="taskItem_item_content_base_item">
              <p>担保人</p>
              <span>{{ taskItemBaseHTQYdbht.customerName }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同类型</p>
              <span>{{ taskItemBaseHTQYdbht.contType.order }}</span>
            </div>
            <div class="taskItem_item_content_base_item">
              <p>合同金额</p>
              <span>{{ taskItemBaseHTQYdbht.contAmount }}</span>
            </div>
          </div>
        </div>
        <!-- 审批流 -->
        <div class="taskItem_item">
          <div class="taskItem_item_title" @click="taskItemListCut(2)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>审批流信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 2 }"></i>
          </div>
          <div
            class="taskItem_item_content_workflow"
            v-if="taskItemListState == 2"
          >
            <div class="taskItem_item_content_workflow_item_box">
              <div class="taskItem_item_content_workflow_item">
                <div class="workflow_item_left workflow_item_left_no"></div>
                <div class="workflow_item_right_top "></div>
              </div>
              <div class="taskItem_item_content_workflow_item">
                <div class="workflow_item_left ">
                  <i class=""></i>
                </div>
                <div
                  class="workflow_item_right"
                  v-for="item in taskItemWorkflowData.slice(taskItemWorkflowData.length -1)"
                >
                  <div class="workflow_item_right_title">
                    <span>同意</span>
                    <i>{{ item.approvalTs }}</i>
                  </div>
                  <div class="workflow_item_right_content">
                    <div class="workflow_item_right_content_item">
                      <p>提交人</p>
                      <span>{{item.senderName}}</span>
                    </div>
                    <div class="workflow_item_right_content_item">
                      <p>部门</p>
                      <span>{{ item.taskName }}</span>
                    </div>
                    <div class="workflow_item_right_content_item">
                      <p>审批状态</p>
                      <span v-if="item.result == 'AGREE'">通过</span>
                      <span v-if="item.result == 'DISAGREE'">驳回</span>
                      <span v-if="item.result == 'SUBMIT'">提交</span>
                      <span v-if="item.result == 'MEETING'">安排上会</span>
                      <span v-if="item.result == 'RATIFY'">批准</span>
                      <span v-if="item.result == 'AGREEPOST'">否决</span>
                      <span v-if="item.result == 'AGREE'">同意后置</span>
                      <span v-if="item.result == 'DISAGREEPOST'">不同意后置</span>
                    </div>
                    <div class="workflow_item_right_content_item">
                      <p>处理人</p>
                      <span>{{ item.approverName }}</span>
                    </div>
                    <div class="workflow_item_right_content_opinion">
                      <em>审批意见</em>
                      <span>{{ item.opinionText }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="taskItem_item_content_workflow_item"
                v-if="taskItemWorkflowData.length > 1"
              >
                <div class="workflow_item_left workflow_item_left_no">
                  <i class=""></i>
                </div>
                <div class="workflow_item_right_more ">
                  <button @click="workflowShowAll" href="#">
                    查看完整审批意见流程
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 附件 -->
        <div class="taskItem_item taskItem_item_buttom">
          <div class="taskItem_item_title" @click="taskItemListCut(3)">
            <img src="@/pages/mobile/assets/img/taskItemimg.png" alt="" />
            <span>附件信息</span>
            <i :class="{ taskItemItemTitleTab: taskItemListState == 3 }"></i>
          </div>
          <div
            class="taskItem_item_content_accessory"
            v-if="taskItemListState == 3"
          >
            <div
              class="taskItem_item_content_accessory_item"
              v-for="item in 10"
            >
              <img src="@/pages/mobile/assets/img/taskItemDOC.png" alt="" v-if="false" />
              <img
                src="@/pages/mobile/assets/img/taskItemXML.png"
                alt=""
                v-else-if="false"
              />
              <img src="@/pages/mobile/assets/img/taskItemPDF.png" alt="" v-else />
              <span>湖北金融租赁公司租赁业务申请书</span>
            </div>
          </div>
        </div>
      </scroll>
      <div class="taskItem_item_idea_box">
        <button @click="taskItemApproverM(0)">驳回</button>
        <button @click="taskItemApproverM(1)">同意</button>
      </div>
    </div>
    <task-item-list
      v-if="workflowState"
      :workflowData="taskItemWorkflowData"
      @workflowChild="workflowShowPart"
    ></task-item-list>
    <task-item-approver
      v-if="taskItemApproverBox"
      @ApproverChild="taskItemApproverState"
      :approverState="taskItemApproverBoxState"
    >
    </task-item-approver>
  </div>
</template>
  
<script>
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
import TaskItemList from "@/pages/mobile/views/nav/home/component/TaskItemList.vue";
import TaskItemApprover from "@/pages/mobile/views/nav/home/component/TaskItemApprover.vue";
export default {
  name: "taskInfo",
  components: {
    Scroll,
    TaskItemList,
    TaskItemApprover
  },

  data () {
    return {
      title: "湖南永旺机械收款是的观点是否",
      taskItemApproverBox: false, //审批页面
      taskItemApproverBoxState: "", //点击审批状态
      workflowState: false, //审批流显示状态
      taskItemListState: '',//信息折叠状态
      taskLinst: this.$route.query.taskItemData,
      taskItemWorkflowData: '', //审批流数据
      // 基本信息
      taskItemBaseXMLX: {}, //项目立项
      taskItemBaseXMPSjbxx: {},   // 项目评审-基本信息
      taskItemBaseXMPSbjcs: {},   // 项目评审-报价测算
      taskItemBaseXMPSzlwxx: {},  // 项目评审-租赁物信息-供应商
      taskItemBaseXMPSzlwxxQT: {},// 项目评审-租赁物信息-其他
      taskItemBaseXMPSdbxx: {},   // 项目评审-担保信息
      taskItemBaseHTQYjbxx: {},   // 合同签约-基本信息
      taskItemBaseHTQYbjcs: {},   // 合同签约-报价测算
      taskItemBaseHTQYmmht: {},   // 合同签约-买卖合同/转让协议
      taskItemBaseHTQYdbht: {},   // 合同签约-担保合同
    };
  },
  mounted () {
    this.taskItemQueryPremise()
    this.taskItemQueryBase()
  },
  created () {

  },
  methods: {
    ReturnsHistory () {
      this.$router.goBack();
    },
    // 点击审批驳回方法
    taskItemApproverM (val) {
      this.taskItemApproverBoxState = val
      this.taskItemApproverBox = true
    },
    // 审批提交关闭页面
    taskItemApproverState () {
      this.taskItemApproverBox = false
    },
    // 显示所有审批流
    workflowShowAll () {
      this.workflowState = true
    },
    // 关闭所有审批流
    workflowShowPart () {
      this.workflowState = false
    },
    // 点击切换tab
    taskItemListCut (index) {
      if (this.taskItemListState == index) {
        this.taskItemListState = ""
      } else {
        this.taskItemListState = index
      }
    },
    // 基本信息
    taskItemQueryBase () {
      console.log(this.$route.query.taskItemData, '这个是数据gggggggggg')
      if (this.taskLinst.busiTypeName == '项目立项') {
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/approval/app/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
          // data: {
          //    this.taskLinst.busiId
          // }
        })
          .then(res => {
            this.taskItemBaseXMLX = res.data
            console.log(res, 'nishinage ')
          })
          .catch(error => {
            console.log(error);
          });
      }
      if (this.taskLinst.busiTypeName == '项目评审') {
        // 基本信息
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/project/app/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseXMPSjbxx = res.data
            console.log(res, 'jbxx')
          })
          .catch(error => {
            console.log(error);
          });

        // 报价测算
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/project/app/calc/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseXMPSbjcs = res.data
            console.log(res, 'xmps ')
          })
          .catch(error => {
            console.log(error);
          });
        // 租赁物信息-其他
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/project/app/leasehold/other/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseXMPSzlwxxQT = res
            console.log(this.taskItemBaseXMPSzlwxxQT, 'xmpshh ')
          })
          .catch(error => {
            console.log(error);
          });
        // 租赁物信息-供应商
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/project/app/leasehold/supplier/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseXMPSzlwxx = res
            console.log(this.taskItemBaseXMPSzlwxx, 'xmpshh77')
          })
          .catch(error => {
            console.log(error);
          });
        // 租赁物信息-担保信息
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-project/project/app/guarantee/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseXMPSdbxx = res.data[0]
            console.log(this.taskItemBaseXMPSdbxx, 'xmpshhkkkkkkk')
          })
          .catch(error => {
            console.log(error);
          });

      }
      if (this.taskLinst.busiTypeName == '合同签约') {
        // 基本信息
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-contract/cont/app/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseHTQYjbxx = res.data
            console.log(res, 'jbxx')
          })
          .catch(error => {
            console.log(error);
          });          
          // 报价测算
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-contract/cont/app/calc/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseHTQYbjcs = res.data
            console.log(res, 'jbxx')
          })
          .catch(error => {
            console.log(error);
          });    
          // 买卖合同/转让协议
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-contract/cont/app/collateral/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseHTQYmmht = res.data
            console.log(res, 'jbxx')
          })
          .catch(error => {
            console.log(error);
          });
          // 担保合同
        this.$axios({
          method: "get",
          url: "/joys-rest/lss-contract/cont/app/guarantee/" + this.taskLinst.busiId,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
        })
          .then(res => {
            this.taskItemBaseHTQYdbht = res.data
            console.log(res, 'jbxx')
          })
          .catch(error => {
            console.log(error);
          });

      }
    },
    // 附件信息
    taskItemQueryFilesList (id,type) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-file/files/source/list",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          one2one: false,
          sourceType:type,
          sourceId:id
        }
      })
        .then(res => {
          console.log(res, '文件列表')
          // this.taskItemQueryWorkflow(res.data.procDefKey)
        })
        .catch(error => {
          console.log(error);
        });
    },

    
    taskItemQueryPremise () {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          task: this.taskLinst.taskId
        }
      })
        .then(res => {
          console.log(res, 'lingling')
          console.log( this.taskLinst, 'jhgfdsfgh')
          this.taskItemQueryWorkflow(res.data.procDefKey)
        })
        .catch(error => {
          console.log(error);
        });
    },

    taskItemQueryWorkflow (val) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          procDefKey: val,
          busiDataId: this.taskLinst.busiId,
          approved: true,
          // result: 'ALL',
          pageIndex: 1,
          pageSize: 1000
        }
      })
        .then(res => {
        this.taskItemWorkflowData  = res.data.rows

          //  taskItemWorkflowData.slice(taskItemWorkflowData.length -1)

          // console.log(taskItemWorkflowData, 'xuqiang')
          console.log(this.taskItemWorkflowData , 'xuqiang')
        })
        .catch(error => {
          console.log(error);
        });

    }

  }
};
</script>
  
  <style scoped lang="less">
.Home_taskItem_box {
  background: #fbf9fe;
  position: fixed;
  top: 0rem;
  bottom: 0.1rem;
  width: 100%;
  height: 100%;
  z-index: 500;
  // overflow: hidden;
  // margin-bottom: 0.83rem;
  .taskItem_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    z-index: 501;
    position: fixed;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .taskItem_title_return {
      float: left;
      height: 0.44rem;
      line-height: 0.44rem;
      img {
        // width: 0.15rem;
        float: left;
        height: 0.205rem;
        padding-left: 0.085rem;
        vertical-align: baseline;
        margin-top: 0.12rem;
      }
      span {
        float: left;
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        margin-left: 0.04rem;
        overflow: hidden;
        height: 0.44rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 1.1rem;
      margin-right: 1.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .taskItem_item_box {
    height: 100%;
    // margin-top: 0.1rem;
    margin-top: 0.44rem;
    .taskItem_item {
      .taskItem_item_title {
        position: relative;
        height: 0.44rem;
        line-height: 0.44rem;
        background: #ffffff;
        border: 1px solid #ecedf2;
        border-radius: 4px;
        margin: 0 0.16rem;
        display: flex;
        align-items: center;
        img {
          width: 0.2rem;
          margin: 0.16rem;
        }
        span {
          font-family: PingFangSC-Medium;
          font-size: 0.15rem;
          color: #202f1f;
          letter-spacing: -0.41px;
          line-height: 0.15rem;
          font-weight: 700;
        }
        i {
          display: block;
          width: 0;
          height: 0;
          border-width: 0.07rem 0 0.07rem 0.07rem;
          border-style: solid;
          border-color: transparent transparent transparent #000;
          opacity: 0.5;
          position: absolute;
          top: 0.14rem;
          right: 0.16rem;
          transition: all 0.3s linear;
        }
        .taskItemItemTitleTab {
          transform: rotate(90deg);
          transition: all 0.3s linear;
        }
      }
      .taskItem_item_content_base {
        background: #ffffff;
        border-radius: 4px;
        margin: 0 0.16rem;
        margin-top: 0.1rem;
        padding-top: 0.001rem;
        height: 0px;
        display: none;
        overflow: hidden;
        transition: all 0.3s linear;
        .taskItem_item_content_base_item {
          border-bottom: 1px solid #eeeeee;
          margin: 0 0.16rem;
          padding-bottom: 0.1rem;
          p {
            margin-top: 0.1rem;
            font-family: PingFangSC-Regular;
            font-size: 0.12rem;
            color: rgba(62, 62, 62, 0.65);
            letter-spacing: -0.29px;
            line-height: 0.2rem;
            height: 0.2rem;
          }
          span {
            margin-top: 0.04rem;
            display: table;
            line-height: 0.26rem;
            height: 0.26rem;
            font-family: PingFangSC-Regular;
            font-size: 0.16rem;
            color: rgba(0, 22, 22, 0.85);
            letter-spacing: -0.38px;
          }
        }
        .taskItem_item_content_base_item:last-child {
          border-bottom: 0px solid #eeeeee;
        }
      }
      .taskItem_item_content_workflow {
        background: #ffffff;
        border-radius: 4px;
        margin: 0 0.16rem;
        margin-top: 0.1rem;
        padding: 0.1rem 0;
        .taskItem_item_content_workflow_item_box {
          .taskItem_item_content_workflow_item {
            display: flex;
            align-items: center;
            margin: 0 0.12rem;
            position: relative;
            .workflow_item_left {
              margin-left: 0.04rem;
              margin-right: 0.13rem;
              overflow: hidden;
              position: absolute;
              height: 100%;
              width: 0.18rem;
              i {
                display: block;
                width: 0.18rem;
                height: 0.18rem;
                background: #f15a4a;
                border-radius: 50%;
                border: 0px;
              }
              .workflow_item_left_circle {
                display: block;
                width: 0.08rem;
                height: 0.08rem;
                background: #fff;
                border: 0.05rem solid #f15a4a;
                border-radius: 50%;
              }
            }
            .workflow_item_left::after {
              content: "";
              background: #f15a4a;
              width: 0.05rem;
              display: block;
              margin-left: 0.07rem;
              height: 100%;
            }
            .workflow_item_left_no:after {
              background: linear-gradient(#f15a4a 48px, #E9E9E9; 1px, #E9E9E9;);
            }
            .workflow_item_right {
              float: left;
              background: #ffffff;
              border: 1px solid #eeeeee;
              border-radius: 4px;
              margin-bottom: 0.17rem;
              margin-left: 0.35rem;
              .workflow_item_right_title {
                padding: 0 0.12rem;
                background: #fbfbfb;
                border-radius: 4px 4px 0px 0px;
                height: 0.34rem;
                line-height: 0.34rem;
                display: flex;
                align-items: center;
                span {
                  margin-right: 0.13rem;
                  font-family: PingFangSC-Regular;
                  font-size: 0.17rem;
                  color: #263939;
                  letter-spacing: 0;
                  font-weight: 700;
                }
                i {
                  font-family: PingFangSC-Regular;
                  font-size: 0.13rem;
                  color: #818181;
                  letter-spacing: 0;
                }
              }
              .workflow_item_right_content {
                padding: 0 0.12rem;
                .workflow_item_right_content_item {
                  width: 49%;
                  float: left;
                  box-sizing: border-box;
                  margin-top: 0.06rem;
                  p {
                    height: 0.28rem;
                    line-height: 0.28rem;
                    display: block;
                    font-family: PingFangSC-Regular;
                    font-size: 0.12rem;
                    color: rgba(62, 62, 62, 0.65);
                    letter-spacing: -0.29px;
                  }
                  span {
                    display: block;
                    font-family: PingFangSC-Regular;
                    font-size: 0.16rem;
                    color: rgba(0, 22, 22, 0.85);
                    letter-spacing: -0.38px;
                    font-weight: 700;
                  }
                }
                .workflow_item_right_content_opinion {
                  float: left;
                  em {
                    height: 0.28rem;
                    line-height: 0.28rem;
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: rgba(62, 62, 62, 0.65);
                    letter-spacing: -0.29px;
                  }
                  span {
                    display: block;
                    font-family: PingFangSC-Regular;
                    font-size: 0.16rem;
                    color: rgba(0, 22, 22, 0.85);
                    letter-spacing: -0.38px;
                    margin-bottom: 0.13rem;
                    word-break: break-all;
                  }
                }
              }
            }
            .workflow_item_right_more {
              float: left;
              background: #ffffff;
              border-radius: 4px;
              margin-bottom: 0.17rem;
              margin-left: 0.35rem;
              height: 103px;
              button {
                display: block;
                height: 0.38rem;
                line-height: 0.38rem;
                padding: 0 0.12rem;
                box-shadow: 0 0 4px 0 #f15a4a;
                border-radius: 2px;
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #f15a4a;
                letter-spacing: -0.38px;
                background: #fff;
              }
            }
            .workflow_item_right_top {
              float: left;
              background: #ffffff;
              border-radius: 4px;
              margin-bottom: 0.17rem;
              margin-left: 0.35rem;
              height: 0px;
            }
          }
          .taskItem_item_content_workflow_item:last-child {
            .workflow_item_right {
              margin-bottom: 0px;
            }
          }
        }
      }
      .taskItem_item_content_accessory {
        background: #ffffff;
        border-radius: 4px;
        margin: 0 0.16rem;
        margin-top: 0.1rem;
        .taskItem_item_content_accessory_item {
          display: flex;
          align-items: center;
          height: 0.51rem;
          border-bottom: 1px solid #eeeeee;
          overflow: hidden;
          margin: 0 0.16rem;
          img {
            width: 0.23rem;
            height: 0.28rem;
            margin-right: 0.16rem;
          }
          span {
            font-family: PingFangSC-Regular;
            font-size: 0.13rem;
            color: rgba(0, 22, 22, 0.85);
            letter-spacing: -0.31px;
          }
        }
        .taskItem_item_content_accessory_item:last-child {
          border-bottom: 0px solid #eeeeee;
        }
      }
      .taskItem_item_content_animation {
        height: auto;
        display: block;
        transition: all 3s linear;
      }
    }
    .taskItem_item::before {
      content: "";
      display: block;
      height: 0.1rem;
      width: 100%;
    }
    .taskItem_item_buttom::after {
      content: "";
      height: 1.05rem;
      width: 100%;
      display: block;
    }
  }
  .taskItem_item_idea_box {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0.5rem;
    background: #f9fcfe;
    box-shadow: inset 0 1px 0 0 #f9fcfe;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      float: right;
      width: 44%;
      height: 0.29rem;
      font-size: 0.14rem;
      border-radius: 4px;
      background: #be9457;
      font-family: PingFangSC-Medium;
      color: #ffffff;
      letter-spacing: 0;
    }
    button:nth-child(1) {
      border: 1px solid #be9457;
      color: #be9457;
      margin-right: 0.15rem;
      background: #fff;
    }
  }
}
</style>
  